<template>
  <div v-if="lyric" class="box">
    <ul
      ref="listEl"
      :style="{
        marginTop: `-${frontLisHeight}px`,
        transform: `translateY(${discHeight / 2 - 2}px)`,
      }"
    >
      <li
        :class="{ active: currentLyricIndex === index }"
        v-for="(item, index) in parsedLyric"
        :key="index"
      >
        {{ item.text || "---" }}
      </li>
    </ul>
  </div>
  <div v-else class="box">
    <el-empty :image-size="20" description="请播放歌曲"></el-empty>
  </div>
</template>

<script>
import store from "../../store";
import axios from "axios";

export default {
  name: "songLyric",
  props: ["discHeight"],
  data() {
    return {
      lyric: null,
      parsedLyric: [],
      frontLisHeight: 0,
    };
  },
  computed: {
    song: function () {
      return store.state.Counter.song;
    },
    currentTime: function () {
      return store.state.Counter.currentTime;
    },
    duration: function () {
      return store.state.Counter.duration;
    },
    currentLyricIndex: function () {
      if (this.parsedLyric.length) {
        var index = this.parsedLyric.findIndex((o) => {
          return o.time > this.currentTime;
        });
        // console.log(this.currentTime);
        // console.log(index);
        return index === -1 ? this.parsedLyric.length - 1 : index - 1;
      } else {
        return 0;
      }
    },
  },
  watch: {
    song: function (after, before) {
      this.getLyric(after.id);
    },
    currentLyricIndex: function (ci) {
      // 获取当前高亮行 前面的 所有li
      var frontLis = Array.prototype.slice.call(
        this.$refs.listEl.querySelectorAll("li"),
        0,
        ci
      );
      // 计算前面所有 li的高度和
      var frontLisHeight = frontLis.reduce(function (total, liEl) {
        return total + liEl.offsetHeight;
      }, 0);
      // console.log(frontLisHeight);
      this.frontLisHeight = frontLisHeight;
    },
    lyric: function () {
      this.parsedLyric = this.lyric
        .split("\n")
        .filter((s) => {
          return s;
        })
        .map((item) => {
          let match = item.match(/(^\[\d{2}:\d{2}\.\d{2,3}\]*)(.*)$/im);
          return {
            text: match[2],
            time: match[1],
          };
        })
        .map((item) => {
          let match = item.time.match(/(\d{2}):(\d{2}\.\d{2,3})/i);
          return {
            ...item,
            time: (match[1] * 60 + match[2] * 1).toFixed(3),
          };
        });
    },
  },

  methods: {
    getLyric(id) {
      // 拿歌词
      axios.get(`https://apis.netstart.cn/music/lyric?id=${id}`).then((res) => {
        this.lyric = res.data.lrc.lyric;
        store.commit('save_lyric', this.lyric);
      });
    },
  },
  created() {
    this.lyric = store.state.Counter.lyric;
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  height: 100%;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;

  li {
    transition: 0.1s;
    list-style: none;
    color: rgba(226, 224, 224, 0.4);

    &.active {
      font-size: 18px;
      color: #ffffff;
    }
  }
}

.box {
}

.el-empty {
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .el-empty__description {
    margin: 0;
  }
}

/* 
 [00:00.000] 作词 : 钟声\n
 [00:01.000] 作曲 : 蜷花仕女\n
 [00:02.000] 制作人 : 何山\n
 [00:03.000] 出品 : 网易·云上\n
 [00:14.94]春日的风拂过了大地\n
 [00:18.47]洗劫了隐藏着的忧虑\n
 [00:22.71]风不知道 我绝口不提\n
 [00:25.89]白色枕头 浸湿的黑夜\n
 [00:29.69]游荡在冷与暖的边境\n
 [00:33.20]跨越过冬与春的交替\n
 [00:37.47]时而放晴 时而下雨\n
 [00:40.97]不变的是我自己\n
 [00:47.13]再见 我爱你\n
 [00:49.07]不过 是曾经\n
 [00:50.35]我的心啊\n
 [00:51.79]呼啸的声音\n
 [00:53.92]勇敢地踏过荆棘\n
 [00:55.65]微笑着面对所有的失去\n
 [01:00.19]泪一滴 不能太轻易\n
 [01:01.89]再见 我爱你\n
 [01:03.72]不过 是曾经\n
 [01:05.13]我的心啊\n
 [01:06.40]若你听不清\n
 [01:08.61]固执的像个傻瓜\n
 [01:10.47]总有一天会偶遇\n
 [01:12.24]另个你 孩子的你\
 [01:25.29]冬日的歌谣还未散去\n
 [01:28.45]隐约听到了只字片语\n
 [01:32.27]从不解释 我为何孤寂\n
 [01:35.93]就算全世界与我为敌\n
 [01:39.70]不懂我的就随风而去\n
 [01:43.38]真心的人我绝不犹豫\n
 [01:47.64]无论放晴 或是下雨\n
 [01:51.19]不变的是我自己\n
 [01:57.24]再见 我爱你\n
 [01:59.09]不过 是曾经\n
 [02:00.43]我的心啊\n
 [02:01.92]呼啸的声音\n
 [02:04.04]勇敢地踏过荆棘\n
 [02:05.70]微笑着面对所有的失去\n
 [02:09.58]泪一滴 不能太轻易\n
 [02:12.01]再见 我爱你\n
 [02:13.85]不过 是曾经\n
 [02:15.21]我的心啊\n
 [02:16.66]若你听不清\n
 [02:18.68]固执的像个傻瓜\n
 [02:20.35]总有一天会偶遇\n
 [02:22.39]另个你 孩子的你\n
 [02:41.48]再见 我爱你\n
 [02:43.41]不过 是曾经\n
 [02:44.72]我的心啊\n
 [02:46.13]呼啸的声音\n
 [02:48.19]勇敢地踏过荆棘\n
 [02:50.03]微笑着面对所有的失去\n
 [02:53.80]泪一滴 不能太轻易\n
 [02:56.28]再见 我爱你\n
 [02:58.15]不过 是曾经\n
 [02:59.43]我的心啊\n
 [03:00.69]若你听不清\n
 [03:02.99]固执的像个傻瓜\n
 [03:04.81]总有一天会偶遇\n
 [03:06.59]另个你 孩子的你\n
 [03:13.14]编曲：何山\n
 [03:14.11]吉他：何山\n
 [03:15.10]制作统筹：刘俊坚\n
 [03:15.96]制作助理：马明烨\n
 [03:16.90]配唱制作人：Q.luv\n
 [03:18.05]和声：何山\n
 [03:19.12]混音工程师：全相彦@OK Mastering Studio\n
 [03:21.35]母带工程师：全相彦@OK Mastering Studio\n"
*/
</style>
